<template>
  <!-- 健康报告--------------------------------------  p2------------------------------------------------ -->
  <div>
    <div class="search_box">
      <!-- 筛选搜索 -->
      <div class="screen">
        <div class="tworow">
          <div class="twoleft">
            <div class="change_type_box">
              <el-cascader
                :options="options1"
                @change="change_cascader"
                :props="{
                  children: 'classInfoList',
                }"
              >
              </el-cascader>
              <p></p>
              <el-input
                v-model="search.about_text"
                placeholder="请输入姓名或手机号"
                clearable
                class="change_input2"
                @input="change_input"
              ></el-input>
            </div>
          </div>

          <div class="tworight" v-show="studend_sow">
            <el-select
              v-model="user_id"
              placeholder="请选择学生"
              @change="change_user"
            >
              <el-option
                v-for="item in studend_arr"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="container-homework">
      <!-- 头部 -->
      <div class="health_head">
        <div class="health_left">
          <img :src="userinfo.headImg" />
          <div>
            <p>{{ userinfo.userName }}</p>
            <p>
              <span>{{ userinfo.gradeName }}</span>
              <span>|</span><span>| NO.{{ userinfo.userId }}</span>
            </p>
          </div>
          <div>
            <div class="leng_ju">
              <div :style="{ width: `${content.score}%` }"></div>
            </div>
            <p>
              <span>{{ content.score }}</span>
              <span>综合得分</span>
            </p>
          </div>
        </div>

        <div class="health_right">
          <div class="health_right_button">
            <el-button>编辑报告</el-button>
            <el-button>导出报告</el-button>
          </div>
          <div></div>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- 主体结构 -->
      <!-- 雷达图 -->
      <div class="radar">
        <div>
          <div class="same_title">
            <p></p>
            <p>体质结构</p>
          </div>
          <!-- 雷达盒子 -->
          <div class="radar_box">
            <div
              id="main"
              style="width: 1.9667rem; height: 1.8rem; margin: 0 auto"
            ></div>
          </div>
          <p>
            总体体测成绩属于中等水平，请注意下肢爆发力的锻炼，如多做做蹲马步。此处为体测点评，体育老师输入
          </p>
        </div>
        <div>
          <div class="same_title">
            <p></p>
            <p>技能分析</p>
          </div>
          <!-- 雷达盒子 -->
          <div class="radar_box">
            <div
              id="main2"
              style="width: 1.9667rem; height: 1.8rem; margin: 0 auto"
            ></div>
          </div>
          <p>各项成绩都很不错，再接再厉！此处技能点评，体育老师输入</p>
        </div>
        <div>
          <div class="same_title">
            <p></p>
            <p>生理结构</p>
          </div>
          <!-- 雷达盒子 -->
          <div class="radar_box">
            <div
              id="main3"
              style="width: 1.9667rem; height: 1.8rem; margin: 0 auto"
            ></div>
          </div>
          <p>注意保护视力……此处为学生体检评价，健康老师输入</p>
        </div>
      </div>

      <el-divider></el-divider>
      <!-- 建议选择课程 -->
      <div class="active_class">
        <div class="same_title">
          <p></p>
          <p>建议选择课程</p>
        </div>

        <div class="active_box">
          <div class="active_type">
            <div class="active_one">
              <div></div>
              <p>足球</p>
            </div>
          </div>
          <div class="active_else">
            <p>其它推荐课程</p>
            <p>
              兵乓球、羽毛球、网球、棒球、体育舞蹈、游泳、啦啦操、橄榄球、射箭、击剑等
            </p>
          </div>
        </div>
      </div>

      <el-divider></el-divider>

      <!-- 饮食建议 -->
      <div class="food_active">
        <div class="same_title">
          <p></p>
          <p>今日饮食建议</p>
        </div>

        <div class="food_box">
          <div class="food_one">
            <div>
              <img src="../../../static/img/zao.png" />
              <p>早餐</p>
            </div>
            <div>
              先可以肯定早餐适量摄取一些食物，对人体非常有益，可以选择以下几类的食物：1、谷类的食物，例如全麦的饼干面包，及麦片粥等等。2、奶和豆制品，例如牛奶，能够提供人体丰富的蛋白质，还有适当钙质。3、水果，例如柑橘、苹果等，含有大量的维生素
            </div>
          </div>

          <div class="food_one">
            <div>
              <img src="../../../static/img/zhong.png" />
              <p>中餐</p>
            </div>
            <div>
              能够提供人体所需要的一些微量元素。4、例如摄取肉制品，像鸡肉或牛肉。5、还要适量去摄入一些蔬菜。综合以上
            </div>
          </div>

          <div class="food_one">
            <div>
              <img src="../../../static/img/wan.png" />
              <p>晚餐</p>
            </div>
            <div>
              首先可以肯定早餐适量摄取一些食物，对人体非常有益，可以选择以下几类的食物：1、谷类的食物，例如全麦的饼干面包，及麦片粥等等。2、奶和豆制品，例如牛奶，能够提供人体丰富的蛋白质，还有适当钙质。3、水果，例如柑橘、苹果等，含有大量的维生素C，
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>

      <!-- 作息建议 -->
      <div class="rest_active">
        <div class="same_title">
          <p></p>
          <p>作息建议</p>
        </div>
        <!-- 柱状图 -->
        <div class="self_pie">
          <div class="self_left">
            <div class="self_left_box">
              <div class="self_s"></div>
              <div class="self_q"></div>

              <div class="self_s"></div>
              <div class="self_q"></div>

              <div class="self_s"></div>
              <div class="self_q"></div>

              <div class="self_s"></div>
              <div class="self_q"></div>

              <div class="self_s"></div>
              <div class="self_q"></div>
            </div>
            <div class="self_left_text">
              <p>21:00 入睡</p>
              <p>07:00 醒来</p>
            </div>
          </div>
          <div class="self_left">
            <div class="self_left_box">
              <div class="self_s"></div>
              <div class="self_q"></div>

              <div class="self_s"></div>
              <div class="self_q"></div>

              <div class="self_s"></div>
              <div class="self_q"></div>

              <div class="self_s"></div>
              <div class="self_q"></div>
              <div class="self_s"></div>
              <div class="self_q"></div>
            </div>
            <div class="self_left_text">
              <p>13:00 入睡</p>
              <p>13:45 醒来</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { generate_report, getClsTree, generate_people } from '@/api/index'
export default {
  name: 'homework-sup',
  data() {
    return {
      studend_sow: false,
      studend_arr: [],
      options1: [],
      search: {
        type: '', //类型
        about_text: '', //相关内容
        work_text: '' //合作方内容
      },
      // 分页
      total: 1000,
      // 列表数据
      tableData: [{
        number: 'AM01', //编号
        root_name: '跳绳', //设备名称
        school: '学校名称小太阳机构', //学校
        address: '深圳/南山',  //学校地址
        type: '协调',  //类型
        status: '待激活',  //状态
        out_time: '2020年5月2号',  //出库时间
        bind_time: '2020年5月2号', //绑定时间
        bind_user: '王小二', //绑定用户

        // operation: '操作'
      }],
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '详情'
      }],
      // operVal
      operVal: '',
      userinfo: {}, //用户信息
      content: {
        score: 0
      },  //得分信息
      user_id: '' //用户id
    }
  },
  created() {
    this.user_id = this.$route.query.userId;
    this.getClsTrees();
  },
  methods: {
    change_input(e) {
      console.log('55555555555599', e);
      this.user_id = e;
      setTimeout(()=> {
        this.getall();
      },1000)
        // this.getall();

    },
    // 获取所有信息
    async getall() {
      const queryParam = JSON.parse(sessionStorage.getItem('userMsg'))
      const res = await generate_report({
        orgId: queryParam.orgCode,
        // userId: 1241366
        userId: this.user_id,
        termId: this.$route.query.examId

      })
      console.log('雷达图信息', res);
      if (res.data.errorCode == '0') {
        this.userinfo = res.data.data.hlifeUser;
        console.log('userInfo', this.userinfo);
        if (res.data.data.achievementStat == null) {
          this.content = {score: 0}
        } else {
          this.content = res.data.data.achievementStat;
        }
        var data = res.data.data.examineStat; //体检成绩数据
        var data1 = res.data.data.physicalStat; //体质成绩数据
        this.myEcharts3(this.format_rader(data));
        this.myEcharts(this.format_rader(data1));
      }
    },
    //获取年级树
    async getClsTrees() {
      const queryParam = JSON.parse(sessionStorage.getItem('userMsg'))
      const res = await getClsTree({
        orgId: queryParam.orgCode
      })
      console.log('年级树', res);
      if (res.data.errorCode == '0') {
        this.options1 = res.data.data;
        var arr = res.data.data;
        for (var i in arr) {
          arr[i].label = arr[i].gradeName;
          arr[i].value = arr[i].gradeId;
          for (var n in arr[i].classInfoList) {
            arr[i].classInfoList[n].label = arr[i].classInfoList[n].className;
            arr[i].classInfoList[n].value = arr[i].classInfoList[n].id;
          }
        }

      }
    },
    //获取学生列表
    async get_people(id) {
      const queryParam = JSON.parse(sessionStorage.getItem('userMsg'))
      const res = await generate_people({
        orgId: queryParam.orgCode,
        classId: id
      })
      console.log('学生列表', res);
      if (res.data.errorCode == '0') {
        var arr = res.data.data;
        this.studend_arr = arr;
      }
    },
    change_cascader(e) {
      this.studend_arr = []; //初始化
      this.studend_sow = true;
      var classid = e[1];  //班级id
      this.get_people(classid);

    },
    change_user(e) {
      console.log('5555', e);
      this.user_id = e
      this.getall();
    },

    // 格式化雷达图数据
    format_rader(text) {
      var data = text.nearestAchievementList;  //最近成绩
      var last_data = text.lastAchievementList; //上传成绩
      var garden_data = text.gradeAchievementList; //评价成绩

      console.log('雷达图', data)
      let indicator = [];  //格式化键名数值;

      let bookCat = []; //格式化最近成绩
      let last_indicator = []; //格式化上次成绩
      let garden_indicator = [] //格式化平均成绩
      
        data.forEach(info => {
          let key = info.name;
          let value = info.score;
          bookCat[key] = value;
          console.log(key)
        })

        garden_data.forEach(info => {
          let key = info.name;
          let value = info.score;
          garden_indicator[key] = value
        })


        console.log('雷达图数据不为空');
        last_data.forEach(info => {
          let key = info.name;
          let value = info.score;
          last_indicator[key] = value
        })



      let bookValues = Object.values(bookCat)  //最近值数组
      let pinvalues = Object.values(garden_indicator); //平均成绩值数组
      let lastvalue = Object.values(last_indicator); //上次值数组
      let bookKeys = Object.keys(bookCat)  //键名数组
      bookKeys.forEach(item => indicator.push({
        'name': item,
        'max': 100
      }))
      console.log('bookCat', bookCat, bookValues);
      console.log('pinvalues', pinvalues)
      let newBookVal = []
      for (const i in indicator) {
        let obj = {}
        obj.name = indicator[i].name
        for (const j in bookValues) {
          obj.value = bookValues[i]
        }
        newBookVal.push(obj)
      }
      let result = {
        indicator: indicator,
        bookValues: bookValues,
        pinvalues: pinvalues,
        lastvalue: lastvalue,
        newBookVal: newBookVal
      }
      return result

    },


    change(id) {
      if (this.operVal === '2') {
        this.$router.push({ path: `/commission_details`, query: { id } })
        this.operVal = ''
      } else {
        this.operVal = ''
      }
    },

    myEcharts(data) {
      console.log('第一个雷达', data)
      let myChart = this.$echarts.init(document.getElementById('main'))
      let option = {
        // title: {
        //     // text: '基础雷达图'
        // },
        title: {
          // text: '70%',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#FFF',
            fontSize: 20,
          }
        },
        tooltip: {
          show: true
        },
        legend: {
          borderWidth: 0,
          itemWidth: 10,
          itemHeight: 10,
          right: 0
        },
        color: ['#febdb9', '#91d4ff', '#8bffe0'],
        radar: {
          center: ['45%', '50%'],
          radius: '45%',
          name: {
            textStyle: {
              color: '#0FDD8D',
              borderRadius: 1,
              padding: [3, 5],
              fontSize: 12
            },
            formatter: function (a, b) {
              for(let i = 0;i < data.newBookVal.length;i++) {
                if (data.newBookVal[i].name == a) {
                  return `{b|${data.newBookVal[i].value}}\n{a|${a}}`
                }
              }
            },
            rich: {
              a: {
                align: 'center',
                color: '#888888',
                fontSize: 12
              },
              b: {
                color: '#0FDD8D',
                align: 'center',
                fontSize: 14
              }
            },
          },
          indicator: data.indicator,
          axisLine: {
            lineStyle: {
              color: 'rgba(155, 234, 213, 1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(55, 213, 171, 1)',
              width: 1
            }
          },
          splitNumber: 3
        },
        series: [{
          name: '体质结构',
          type: 'radar',
          symbol: "none", // 去除边框拐角点
          itemStyle: {

            formatter: '{c}%'
          },
          data: [
            {
              name: '上次成绩',
              value: data.lastvalue,
              areaStyle: {
                opacity: 0.7,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#febdb9',
                    offset: 0
                  },
                  {
                    color: '#febdb9',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            },
            {
              name: '本次成绩',
              value: data.bookValues,
              areaStyle: {
                opacity: 0.7,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#91d4ff',
                    offset: 0
                  },
                  {
                    color: '#91d4ff',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            },
            {
              name: '平均成绩',
              value: data.pinvalues,
              areaStyle: {
                opacity: 0.7,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#8bffe0',
                    offset: 0
                  },
                  {
                    color: '#8bffe0',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            }
          ]
        }
        ]
      }
      myChart.setOption(option)
    },
    myEcharts2() {
      let myChart = this.$echarts.init(document.getElementById('main2'))
      let option = {
        // title: {
        //     // text: '基础雷达图'
        // },
        title: {
          // text: '78%',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#FFF',
            fontSize: 20,
          }
        },
        tooltip: {
          show: true
        },
        legend: {
          borderWidth: 0,
          right: 0
        },
        radar: {
          // shape: 'circle',
          center: ['45%', '50%'],
          radius: '45%',
          name: {
            textStyle: {
              color: '#0FDD8D',
              borderRadius: 1,
              padding: [3, 5],
              fontSize: 12
            },
            formatter: function (value) {
              let list = value.split("");
              let text = [];
              let result = '';
              for (let i = 3; i <= list.length - 2; i++) {
                text.push(list[i]);
              }
              if (list[1] == 'a') {
                for (let j = 1; j <= text.length; j++) {
                  result += text[j - 1];
                }
              }
              if (list[1] == 'b') {
                for (let j = 1; j <= text.length; j++) {
                  if (!(j % 3) && text[j] != undefined) {
                    result += text[j - 1] + '\n';
                  } else {
                    result += text[j - 1];
                  }
                }
              }
              if (list[1] == 'c') {
                for (let j = 1; j <= text.length; j++) {
                  if (!(j % 4) && text[j] != undefined) {
                    result += text[j - 1] + '\n';
                  } else {
                    result += text[j - 1];
                  }
                }
              }

              return list[0] + list[1] + list[2] + result + list[list.length - 1];
            },


            rich: {
              a: {
                color: '#0FDD8D'
              },
              b: {
                color: '#0FDD8D',
                align: 'left',
              },
              c: {
                color: '#0FDD8D'
              }
            },
          },
          indicator: [
            { name: '{a|销售啦信息（不需要换行)}', max: 10 },
            { name: '{b|管理员工形象啊}', max: 10 },
            { name: '{c|研发预算开发}', max: 10 }
          ],
          axisLine: {
            lineStyle: {
              color: 'rgba(155, 234, 213, 1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(55, 213, 171, 1)',
              width: 1
            }
          },
          splitNumber: 3
        },
        series: [{
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
          symbol: "none", // 去除边框拐角点
          data: [
            {
              value: [9, 4, 8],
              areaStyle: {
                opacity: 1,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#38D5AB',
                    offset: 0
                  },
                  {
                    color: '#C2FF85',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            }
          ]
        }]
      }
      myChart.setOption(option)
    },
    myEcharts3(data) {
      console.log('第三个雷达图', data)
      let myChart = this.$echarts.init(document.getElementById('main3'))
      let option = {
        // title: {
        //     // text: '基础雷达图'
        // },
        title: {
          // text: '78%',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#FFF',
            fontSize: 20,
          }
        },
        tooltip: {
          show: true
        },
        legend: {
          borderWidth: 0,
          itemWidth: 10,
          itemHeight: 10,
          right: 0
        },
        color: ['#febdb9', '#91d4ff', '#8bffe0'],
        radar: {
          // shape: 'circle',
          center: ['45%', '50%'],
          radius: '45%',
          name: {
            textStyle: {
              color: '#0FDD8D',
              borderRadius: 1,
              padding: [3, 5],
              fontSize: 12
            },
            formatter: function (a, b) {
              for(let i = 0;i < data.newBookVal.length;i++) {
                if (data.newBookVal[i].name == a) {
                  return `{b|${data.newBookVal[i].value}}\n{a|${a}}`
                }
              }
            },
            rich: {
              a: {
                align: 'center',
                color: '#888888',
                fontSize: 12
              },
              b: {
                color: '#0FDD8D',
                align: 'center',
                fontSize: 14
              }
            },
          },
          indicator: data.indicator,
          axisLine: {
            lineStyle: {
              color: 'rgba(155, 234, 213, 1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(55, 213, 171, 1)',
              width: 1
            }
          },
          splitNumber: 3,
        },
        series: [{
          name: '生理结构',
          type: 'radar',
          symbol: "none", // 去除边框拐角点
          data: [
            {
              name: '上次成绩',
              value: data.lastvalue,
              areaStyle: {
                opacity: 0.7,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#febdb9',
                    offset: 0
                  },
                  {
                    color: '#febdb9',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            },
            {
              name: '本次成绩',
              value: data.bookValues,
              areaStyle: {
                opacity: 0.7,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#91d4ff',
                    offset: 0
                  },
                  {
                    color: '#91d4ff',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            },
            {
              name: '平均成绩',
              value: data.pinvalues,
              areaStyle: {
                opacity: 0.7,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#8bffe0',
                    offset: 0
                  },
                  {
                    color: '#8bffe0',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            }
          ]
        }]
      }
      myChart.setOption(option)
    },
  },
  watch: {
    $route(val) {
      var id = val.query.userId;

      this.user_id = id;
      this.getall();
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.getall()

      this.myEcharts2()
    })
  }
}
</script>

<style lang="scss" scoped>
.same_title {
  display: flex;
  align-items: center;
  > p:first-child {
    width: 0.0104rem;
    height: 0.0833rem;
    background-color: #0fdd8d;
    margin-right: 0.0313rem;
  }
  > p:nth-of-type(2) {
    color: #888888;
    font-size: 0.0833rem;
  }
}
.search_box {
  padding: 0.0781rem 0.1302rem;
  background-color: #fff;
  border-radius: 0.0781rem;
  margin-bottom: 0.1302rem;
  // 筛选部分
  .screen {
    .tworow {
      display: flex;

      .twoleft {
        display: flex;
        align-items: center;
        .change_type_box {
          display: flex;
          align-items: center;
          background-color: #f7fbfc;
          border-radius: 0.0521rem;
          padding: 0.0573rem 0.0521rem;
          margin-right: 0.1042rem;
          /deep/ .el-cascader--medium {
            font-size: 0.0729rem;
            line-height: 0.1042rem;
          }
          .change_input2 {
            width: 170px;
          }
          /deep/ .el-input--medium .el-input__inner {
            color: #000;
            font-size: 0.0729rem;
            border: none;
            background-color: #f7fbfc;
            height: 0.1042rem;
            line-height: 0.1042rem;
          }
          /deep/ input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #888888;
            font-size: 0.0729rem;
          }
          /deep/.el-input--medium .el-input__icon {
            line-height: 0.1042rem;
          }
          > p {
            width: 0.0052rem;
            height: 0.0885rem;
            background-color: #dae2e4;
          }
        }

        /deep/ .el-input--medium .el-input__inner {
          color: #000;
          font-size: 0.0729rem;
          border: none;
          background-color: #f7fbfc;
          height: 0.2188rem;
          line-height: 0.2188rem;
        }
        /deep/ input::-webkit-input-placeholder {
          /* placeholder颜色  */
          color: #888888;
          font-size: 0.0729rem;
        }

        .el-button {
          width: 0.4479rem;
          height: 0.2188rem;
          background: #0fdd8d;
          color: #fff;
          border-radius: 0.0521rem;
        }
      }
      // .tworight {
      // }
    }
  }
}
.container-homework {
  padding: 0.1667rem 0.1406rem;
  background-color: #fff;
  border-radius: 0.0781rem;
  // 头部
  .health_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .health_left {
      display: flex;
      align-items: center;
      img {
        width: 0.5208rem;
        height: 0.5208rem;
        margin-right: 0.1354rem;
      }
      > div:nth-of-type(1) {
        margin-right: 0.2344rem;
        > p:first-child {
          color: #525252;
          font-size: 0.1875rem;
          margin-bottom: 0.0521rem;
        }
        > p:nth-of-type(2) {
          display: flex;
          align-items: center;
          span {
            font-size: 0.0729rem;
            color: #888888;
            margin-right: 0.026rem;
          }
        }
      }
      > div:nth-of-type(2) {
        .leng_ju {
          width: 1.35rem;
          height: 0.0729rem;
          background-color: #f7fafc;
          margin-bottom: 0.0781rem;

          > div {
            height: 0.0729rem;
            width: 0%;
            background-color: #0fdd8d;
            border-top-right-radius: 0.0521rem;
            border-bottom-right-radius: 0.0521rem;
          }
        }
        > p {
          > span:first-child {
            color: #0fdd8d;
            font-size: 0.125rem;
          }
          > span:nth-of-type(2) {
            color: #888888;
            font-size: 0.0729rem;
          }
        }
      }
    }
    .health_right {
      .health_right_button {
        .el-button {
          width: 0.7rem;
          height: 0.2188rem;
          background: #f7fbfc;
          border-radius: 0.0521rem;
          padding: 0;
        }

        .el-button:nth-child(2) {
          background-color: #0fdd8d;
          color: #fff;
        }
      }
    }
  }
  // 雷达
  .radar {
    display: flex;
    align-items: center;
    > div {
      width: 33.333%;
      border-right: 0.0052rem dashed #e8e8e8;
      padding: 0 0.1042rem;
      .radar_box {
        margin-top: 0.1563rem;
      }
      > p {
        color: #888888;
        font-size: 0.0729rem;
      }
    }
  }
}
.active_box {
  display: flex;
  margin: 0.1563rem 0;
}
.active_else {
  margin-left: 0.4167rem;
  width: 1.3906rem;
  > p:first-child {
    color: #525252;
    font-size: 0.0729rem;
    margin-bottom: 0.0521rem;
  }
  > p:nth-of-type(2) {
    color: #888888;
    font-size: 0.0625rem;
    line-height: 1.6;
  }
}
.active_type {
  display: flex;
  align-items: center;
  .active_one {
    margin-right: 0.125rem;
    > div {
      width: 0.6rem;
      height: 0.43rem;
      background-color: gainsboro;
      border-radius: 0.0521rem;
    }
    > p {
      color: #888888;
      font-size: 0.0729rem;
      text-align: center;
      margin-top: 0.1042rem;
    }
  }
}
.food_box {
  display: flex;
  justify-content: space-between;
  margin: 0.1563rem 0;
  .food_one {
    width: 30%;
    > div:first-child {
      display: flex;
      align-items: center;
      margin-bottom: 0.0521rem;
      > img {
        width: 0.1563rem;
        height: 0.1563rem;
        margin-right: 0.0521rem;
      }
      > p {
        color: #343434;
        font-size: 0.0833rem;
      }
    }
    > div:nth-of-type(2) {
      background-color: #f7fbfc;
      padding: 0.0677rem 0.0781rem;
      border-radius: 0.0781rem;
      font-size: 0.0729rem;
      color: #888888;
      line-height: 1.6;
      letter-spacing: 0.0026rem;
      min-height: 0.9375rem;
      line-height: 1.8;
    }
  }
}
.self_pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.3125rem;
  margin-bottom: 0.1042rem;
  > div {
    width: 40%;
  }
}
.self_left {
  .self_left_box {
    display: flex;
    align-items: flex-end;
    .self_s {
      width: 10%;
      height: 0.3802rem;
      background-color: #18b87d;
    }
    .self_q {
      width: 10%;
      height: 0.2917rem;
      background-color: #74f8c8;
    }
  }
  .self_left_text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.1042rem;
    p {
      color: #888888;
      font-size: 0.0625rem;
    }
  }
}
</style>
